<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>员工主页 - 房屋租赁管理系统</title>
    <style>
        /* 基础样式 */
        :root {
            --primary: #007bff;
            --success: #28a745;
            --info: #17a2b8;
            --repair: #6e2e93;
            --light-bg: linear-gradient(to right, #e8ecf7, #f9fbff);
            --card-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            --hover-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
            --card-radius: 16px;
            --transition: all 0.3s ease-in-out;
        }

        /* 全局样式 */
        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            margin: 0;
            padding: 0;
            background: var(--light-bg);
            color: #333;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            position: relative;
        }

        /* 主容器 */
        main.container {
            flex: 1;
            max-width: 1200px;
            margin: 40px auto;
            padding: 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto auto;
            gap: 30px;
            grid-template-areas:
                "basic todo"
                "stats stats"
                "repair repair";
        }

        /* 卡片通用样式 */
        .card {
            background: white;
            border-radius: var(--card-radius);
            box-shadow: var(--card-shadow);
            padding: 24px;
            transition: var(--transition);
            border-left: 5px solid var(--primary);
            position: relative;
            overflow: hidden;
        }

        .card:hover {
            transform: translateY(-6px);
            box-shadow: var(--hover-shadow);
        }

        .card h3 {
            margin-top: 0;
            color: var(--primary);
            font-size: 1.25rem;
            font-weight: 600;
            border-bottom: 1px solid #eee;
            padding-bottom: 12px;
            margin-bottom: 16px;
        }

        /* 信息行 */
        .info-row {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
        }

        .label {
            font-weight: 600;
            width: 100px;
            color: #555;
        }

        .value {
            flex-grow: 1;
            padding-left: 10px;
            font-size: 1rem;
        }

        /* 标签样式 */
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 6px;
        }

        .tag {
            background-color: #e0e0e0;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            color: #555;
        }

        /* 按钮样式 */
        .actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .btn {
            padding: 10px 16px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            color: white;
            font-size: 14px;
            font-weight: 600;
            transition: background 0.2s ease-in-out, transform 0.2s ease-in-out;
            display: inline-block;
            text-align: center;
        }

        .btn:hover {
            transform: scale(1.02);
        }

        .btn-view {
            background-color: var(--success);
        }

        .btn-view:hover {
            background-color: #218838;
        }

        .btn-add {
            background-color: var(--info);
        }

        .btn-add:hover {
            background-color: #117a8b;
        }

        .btn-repair {
            background-color: var(--repair);
        }

        .btn-repair:hover {
            background-color: rgba(110, 46, 147, 0.8);
        }

        .btn-close {
            background-color: #6c757d;
        }

        .btn-close:hover {
            background-color: #5a6268;
        }

        /* 任务列表 */
        .task-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .task-item {
            padding: 10px 14px;
            margin-bottom: 8px;
            background-color: #f8f9fa;
            border-radius: 8px;
            font-size: 14px;
            color: #555;
            transition: background-color 0.2s ease-in-out;
        }

        .task-item:hover {
            background-color: #e9ecef;
        }

        /* 统计盒子 */
        .stats-box {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
            background-color: #fff;
            border-radius: 8px;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .stats-box thead {
            background-color: #f1f3f7;
            color: #333;
            font-weight: 600;
        }

        .stats-box th,
        .stats-box td {
            padding: 14px 16px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
            word-break: break-word;
            white-space: normal;
        }

        .stats-box th:first-child,
        .stats-box td:first-child {
            padding-left: 24px;
            border-left: none;
        }

        .stats-box th:last-child,
        .stats-box td:last-child {
            padding-right: 24px;
            border-right: none;
        }

        .stats-box tbody tr:hover {
            background-color: #f9fbff;
        }

        .stats-box table {
            min-width: 100%;
            max-height: 100%;
            overflow: hidden;
            table-layout: fixed;
        }

        /* 模态框样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-card {
            background: white;
            border-radius: var(--card-radius);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow: auto;
            position: relative;
            animation: modalFadeIn 0.3s ease-out;
        }

        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-header h3 {
            margin: 0;
            color: var(--primary);
        }

        .modal-body {
            padding: 20px;
        }

        .modal-footer {
            padding: 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }

        /* 添加房源表单 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
        }

        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 15px;
            transition: border 0.3s ease;
        }

        .form-control:focus {
            border-color: var(--primary);
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
        }

        /* 所有房源表格容器 */
        .all-houses-container {
            max-height: 400px;
            overflow-y: auto;
            border: 1px solid #eee;
            border-radius: 8px;
        }

        /* 关闭按钮 */
        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #777;
            transition: color 0.2s;
        }

        .close-btn:hover {
            color: #333;
        }

        /* 网格区域定义 */
        .employee-basic { grid-area: basic; }
        .todo { grid-area: todo; }
        .stats { grid-area: stats; }
        .repair { grid-area: repair; }

        /* 卡片高度调整 */
        .employee-basic, .todo {
            height: 350px;
        }

        .stats, .repair {
            height: auto;
        }

        /* 卡片内部布局 */
        .card-content {
            height: calc(100% - 40px);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .scrollable-content {
            flex: 1;
            overflow-y: auto;
            padding-right: 5px;
        }

        /* 表格列宽优化 */
        .fixed-columns th:nth-child(1), .fixed-columns td:nth-child(1) { width: 10%; }
        .fixed-columns th:nth-child(2), .fixed-columns td:nth-child(2) { width: 10%; }
        .fixed-columns th:nth-child(3), .fixed-columns td:nth-child(3) { width: 10%; }
        .fixed-columns th:nth-child(4), .fixed-columns td:nth-child(4) { width: 10%; }
        .fixed-columns th:nth-child(5), .fixed-columns td:nth-child(5) { width: 30%; }

        /* 滚动条美化 */
        .scrollable-content::-webkit-scrollbar {
            width: 8px;
        }

        .scrollable-content::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }

        .scrollable-content::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 4px;
        }

        .scrollable-content::-webkit-scrollbar-thumb:hover {
            background: #a8a8a8;
        }
    </style>
</head>
<body>
<jsp:include page="/page/model/navbar.jsp" />

<main class="container">
    <!-- 员工基本信息 -->
    <div class="card employee-basic">
        <h3>员工基本信息</h3>
        <div class="card-content">
            <div class="scrollable-content">
                <div class="info-row">
                    <span class="label">员工ID：</span>
                    <span class="value">${employeeDetails.employee.employeeId}</span>
                </div>
                <div class="info-row">
                    <span class="label">姓名：</span>
                    <span class="value">${employeeDetails.employee.name}</span>
                </div>
                <div class="info-row">
                    <span class="label">电话：</span>
                    <span class="value">${employeeDetails.employee.phone}</span>
                </div>
                <div class="info-row">
                    <span class="label">工资：</span>
                    <span class="value">￥${employeeDetails.employee.salary}</span>
                </div>
                <div class="info-row">
                    <span class="label">身份：</span>
                    <div class="tags">
                        <c:forEach items="${employeeDetails.roleNames}" var="roleName">
                            <span class="tag">${roleName}</span>
                        </c:forEach>
                    </div>
                </div>
                <div class="info-row">
                    <span class="label">技能：</span>
                    <div class="tags">
                        <c:forEach items="${employeeDetails.skills}" var="skill">
                            <span class="tag">${skill}</span>
                        </c:forEach>
                    </div>
                </div>
            </div>
            <div class="actions">
                <a href="${pageContext.request.contextPath}/employee/personalInfo" class="btn btn-view">刷新页面</a>
            </div>
        </div>
    </div>

    <!-- 待办事项 -->
    <div class="card todo">
        <h3>待办事项</h3>
        <div class="card-content">
            <div class="scrollable-content">
                <ul class="task-list">
                    <li class="task-item">审核客户申请 - 张三</li>
                    <li class="task-item">跟进看房预约 - 李四</li>
                    <li class="task-item">更新房源信息 - 编号 1003</li>
                    <li class="task-item">处理合同续签 - 王五</li>
                    <li class="task-item">检查维修进度 - 阳光小区</li>
                    <li class="task-item">安排新员工培训</li>
                    <li class="task-item">提交月度工作报告</li>
                </ul>
            </div>
            <div class="actions">
                <a href="#" class="btn btn-view">全部待办</a>
            </div>
        </div>
    </div>

    <!-- 房源管理统计 -->
    <div class="card stats">
        <h3>房源管理统计</h3>
        <div class="card-content">
            <div class="scrollable-content">
                <div class="info-row">
                    <span class="label">总房源数：</span>
                    <span class="value"><c:out value="${allHouses.size()}"/> 套</span>
                </div>
                <div class="info-row">
                    <span class="label">负责房源：</span>
                    <span class="value"><c:out value="${houses.size()}"/> 套</span>
                </div>
                <p><strong>管理房源信息：</strong></p>
                <div class="stats-box">
                    <table class="fixed-columns">
                        <thead>
                        <tr>
                            <th>楼栋编号</th>
                            <th>房间号</th>
                            <th>卧室数</th>
                            <th>卫生间数</th>
                            <th>地址</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:if test="${houses.size() == 0}">
                            <tr>
                                <td colspan="5">暂无数据</td>
                            </tr>
                        </c:if>
                        <c:forEach items="${houses}" var="house">
                            <tr>
                                <td>${house.buildingId}</td>
                                <td>${house.apartmentNo}</td>
                                <td>${house.bedroomCount}</td>
                                <td>${house.bathroomCount}</td>
                                <td>${house.address}</td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="actions">
                <button class="btn btn-add" onclick="showAddHouseModal()">添加房源</button>
                <button class="btn btn-add" onclick="showAllHousesModal()">所有房源</button>
                <a href="${pageContext.request.contextPath}/contract/list" class="btn btn-add">合同签订</a>
            </div>
        </div>
    </div>

    <!-- 维修工单 -->
    <div class="card repair">
        <h3>维修工单信息</h3>
        <div class="card-content">
            <div class="scrollable-content">
                <p><strong>可接工单：</strong></p>
                <div class="stats-box">
                    <table>
                        <thead>
                        <tr>
                            <th>工单号</th>
                            <th>楼栋号</th>
                            <th>房间号</th>
                            <th>具体描述</th>
                            <th>申请时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:if test="${empty todoRepairRequests}">
                            <tr>
                                <td colspan="6">暂无数据</td>
                            </tr>
                        </c:if>

                        <c:if test="${not empty todoRepairRequests}">
                            <c:forEach items="${todoRepairRequests}" var="repairRequest">
                                <tr>
                                    <td>${repairRequest.requestId}</td>
                                    <td>${repairRequest.buildingId}</td>
                                    <td>${repairRequest.apartmentNo}</td>
                                    <td>${repairRequest.description}</td>
                                    <td>${repairRequest.reportDate}</td>
                                    <td>
                                        <button type="button" class="btn btn-repair" onclick="getRepairRequest('${employeeDetails.employee.employeeId}','${repairRequest.requestId}')">接单</button>
                                    </td>
                                </tr>
                            </c:forEach>
                        </c:if>
                        </tbody>
                    </table>
                </div>
                <p><strong>我的工单：</strong></p>
                <div class="stats-box">
                    <table>
                        <thead>
                        <tr>
                            <th>工单号</th>
                            <th>楼栋号</th>
                            <th>房间号</th>
                            <th>具体描述</th>
                            <th>申请时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:if test="${empty repairRequests}">
                            <tr>
                                <td colspan="6">暂无数据</td>
                            </tr>
                        </c:if>

                        <c:if test="${not empty repairRequests}">
                            <c:forEach items="${repairRequests}" var="repairRequest">
                                <tr>
                                    <td>${repairRequest.requestId}</td>
                                    <td>${repairRequest.buildingId}</td>
                                    <td>${repairRequest.apartmentNo}</td>
                                    <td>${repairRequest.description}</td>
                                    <td>${repairRequest.reportDate}</td>
                                    <td>
                                        <button type="button" class="btn btn-repair" onclick="finishRepair('${repairRequest.requestId}','${repairRequest.description}')">已完成</button>
                                    </td>
                                </tr>
                            </c:forEach>
                        </c:if>
                        </tbody>
                    </table>
                </div>
                <p><strong>维修记录：</strong></p>
                <div class="stats-box">
                    <table>
                        <thead>
                        <tr>
                            <th>工单号</th>
                            <th>关联请求工单号</th>
                            <th>维修时间</th>
                            <th>内容</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:if test="${empty repairRecords}">
                            <tr>
                                <td colspan="6">暂无数据</td>
                            </tr>
                        </c:if>

                        <c:if test="${not empty repairRecords}">
                            <c:forEach items="${repairRecords}" var="repairRecord">
                                <tr>
                                    <td>${repairRecord.recordId}</td>
                                    <td>${repairRecord.requestId}</td>
                                    <td>${repairRecord.repairDate}</td>
                                    <td>${repairRecord.content}</td>
                                </tr>
                            </c:forEach>
                        </c:if>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- 添加房源模态框 -->
<div id="addHouseModal" class="modal-overlay">
    <div class="modal-card">
        <div class="modal-header">
            <h3>添加新房源</h3>
            <button class="close-btn" onclick="closeModal('addHouseModal')">&times;</button>
        </div>
        <form id="addHouseForm" action="${pageContext.request.contextPath}/house/add" method="post">
            <div class="modal-body">
                <input type="hidden" name="employeeId" value="${employeeDetails.employee.employeeId}">

                <div class="form-group">
                    <label for="buildingId">楼栋编号</label>
                    <input type="text" id="buildingId" name="buildingId" class="form-control" required placeholder="如：14#">
                </div>

                <div class="form-group">
                    <label for="apartmentNo">公寓编号</label>
                    <input type="text" id="apartmentNo" name="apartmentNo" class="form-control" required placeholder="如：A101">
                </div>

                <div class="form-group">
                    <label for="bedroomCount">卧室数量</label>
                    <input type="number" id="bedroomCount" name="bedroomCount" class="form-control" min="1" required placeholder="如：2">
                </div>

                <div class="form-group">
                    <label for="bathroomCount">卫生间数量</label>
                    <input type="number" id="bathroomCount" name="bathroomCount" class="form-control" min="1" required placeholder="如：1">
                </div>

                <div class="form-group">
                    <label for="address">详细地址</label>
                    <input type="text" id="address" name="address" class="form-control" required placeholder="如：北京市朝阳区建国路88号(若楼栋已存在可输入任意字符)">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-close" onclick="closeModal('addHouseModal')">取消</button>
                <button type="submit" class="btn btn-add">添加房源</button>
            </div>
        </form>
    </div>
</div>

<!-- 所有房源模态框 -->
<div id="allHousesModal" class="modal-overlay">
    <div class="modal-card">
        <div class="modal-header">
            <h3>所有房源信息</h3>
            <button class="close-btn" onclick="closeModal('allHousesModal')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="all-houses-container">
                <table class="stats-box">
                    <thead>
                    <tr>
                        <th>楼栋编号</th>
                        <th>房间号</th>
                        <th>卧室数</th>
                        <th>卫生间数</th>
                        <th>地址</th>
                        <th>负责经理ID</th>
                        <th>经理姓名</th>
                        <th>经理电话</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:if test="${empty allHouses}">
                        <tr>
                            <td colspan="8">暂无房源数据</td>
                        </tr>
                    </c:if>
                    <c:if test="${not empty allHouses}">
                        <c:forEach items="${allHouses}" var="house">
                            <tr>
                                <td>${house.buildingId}</td>
                                <td>${house.apartmentNo}</td>
                                <td>${house.bedroomCount}</td>
                                <td>${house.bathroomCount}</td>
                                <td>${house.address}</td>
                                <td>${house.managerId}</td>
                                <td>${house.managerName}</td>
                                <td>${house.managerPhone}</td>
                            </tr>
                        </c:forEach>
                    </c:if>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-close" onclick="closeModal('allHousesModal')">关闭</button>
        </div>
    </div>
</div>

<jsp:include page="/page/model/footer.jsp"/>

<script>
    // 维修工单相关函数
    function getRepairRequest(employeeId, requestId) {
        window.location.href = "${pageContext.request.contextPath}/repair/accept?employeeId=" + employeeId + "&requestId=" + requestId;
    }

    function finishRepair(requestId,content) {
        window.location.href = "${pageContext.request.contextPath}/repair/finish?requestId=" + requestId+"&content=" + content;
    }

    // 模态框相关函数
    function showAddHouseModal() {
        document.getElementById('addHouseModal').style.display = 'flex';
    }

    function showAllHousesModal() {
        document.getElementById('allHousesModal').style.display = 'flex';
    }

    function closeModal(modalId) {
        document.getElementById(modalId).style.display = 'none';
    }

    // 点击模态框外部关闭模态框
    window.addEventListener('click', function(event) {
        const modals = document.querySelectorAll('.modal-overlay');
        modals.forEach(modal => {
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        });
    });

    // 表单提交处理
    document.getElementById('addHouseForm').addEventListener('submit', function(e) {
        // 这里可以添加表单验证逻辑
        // 如果验证失败，使用 e.preventDefault() 阻止表单提交
    });
</script>
</body>
</html>